<template>
  <div>
    <span class="comment-arrows">
      <em class="comment-em"></em>
    </span>
    <div class="comment-con">
      <div class="comment-form">
        <div class="comment-form-avater">
          <el-avatar :size="35" :src="state.circleUrl" class="lazy-avatar" />
        </div>
        <div class="form-box" @mouseleave="handleBoxA2">
          <div class="input-box">
            <div
              spellcheck="false"
              contenteditable
              @mousedown="handleBoxA"
              placeholder="输入评论（Enter换行，Ctrl + Enter发送）"
              disabled
              class="rich-input"
            ></div>
          </div>
          <div class="action-boxA" v-show="isDisplay">
            <div class="emoji">
              <i class="iconfont icon-biaoqing"></i>
              <span>表情</span>
            </div>
            <div class="emoji emoj-pic">
              <i class="iconfont icon-biaoqing"></i>
              <span>图片</span>
            </div>
            <div class="action-submit">
              <span>Ctrl + Enter</span>
              <button class="submit-btn">发表评论</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="comment-list-wrapper">
      <div class="comment-list-title">
        <div class="comment-all">全部评论（{{ pinsArr.review }}）</div>
        <div class="sort">
          <div class="sort-item">最新</div>
          <div class="divide"></div>
          <div class="sort-item">最热</div>
        </div>
      </div>
      <div class="comment-list-con" v-for="(element, index) in commentData" :key="index">
        <div class="comment-form-avater">
          <el-avatar :size="35" :src="state.circleUrl" class="lazy-avatar" />
        </div>
        <div class="comment-box">
          <div class="comment-main">
            <div class="user-box">
              <div class="popover-box">
                <a href="#">
                  <span>{{ pinsArr.comment.nick_name }}</span>
                  <span>
                    <img :src="element.img" alt="" />
                  </span>
                  <img :src="element.pic" alt="" />
                </a>
              </div>
              <span class="divide"></span>
              <span class="position">{{ element.commPost }}</span>
              <span class="divide"></span>
              <span class="position">{{ element.commTime }}</span>
            </div>
            <div class="commConent">{{ pinsArr.comment.comment_info }}</div>
            <div class="pos-action">
              <div class="item-dig-item">
                <i class="iconfont icon-icon"></i>
                点赞
              </div>
              <div class="item-dig-item">
                <i class="iconfont icon-pinglun"></i>
                评论
              </div>
            </div>
          </div>
          <div class="subcomment"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'

//显示表情
const isDisplay = ref(false)
const handleBoxA = () => {
  isDisplay.value = true
}

const handleBoxA2 = () => {
  isDisplay.value = false
}
// 头像
const state = reactive({
  circleUrl: 'https://p26-passport.byteacctimg.com/img/user-avatar/569d8550d42ce7a15c14c4428ae7fb68~300x300.image'
})

// 接受父组件传过来的值
const props = defineProps({
  pinsArr: {
    type: Array,
    default: ''
  }
})
console.debug(props.pinsArr, '父组件传过来的值')
</script>
<style scoped>
@import '@/styles/pins/centre.css';
</style>
